<template>
    <div class="ZYF-Abnormal">
        <h3 class="h3">异常处理</h3>
        <div class="deviceinfo-from">
             <a-form-model layout="inline" :model="page" :colon="false">
                <a-form-model-item label="站点名称" :label-col="{span: 6}" :wrapper-col="{span: 16}">
                    <a-tree-select  treeNodeFilterProp="title" showSearch :treeDefaultExpandAll="true" v-model="page.monitorId" :tree-data="TreeData" :dropdownStyle="{maxHeight:'500px',overflow: 'auto'}" :replaceFields="{title:'name',key:'id',value:'id',children:'equipmentInfos'}" allowClear placeholder="请选择站点" />
                </a-form-model-item>
                <a-form-model-item label="监测类型" :label-col="{span: 6}" :wrapper-col="{span: 16}">
                    <a-input v-model="page.monitorFactorsName" placeholder="请输入要查找的监测类型" allow-clear />
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="primary" @click="onSubmit">查询</a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
        <div class="tableclass">
            <my-table style="height:98%" :columns="columns" :rowKey="record=> record.id" :data-source="TableData" :pagination="false">
                <template slot="operate" slot-scope="text,record,index">
                    <div class="handle">
                        <span @click="onShow(record.id)">处理</span>
                    </div>
                </template>
            </my-table>
            <div class="content-bottom clearfix">
                <div class="page-box">
                    <a-pagination :show-total="total => `共 ${total} 条记录`" v-model="page.current" :total="total" :defaultPageSize="page.size" :item-render="itemRender" @change="pagechangeFn" hideOnSinglePage />
                </div>
            </div>
        </div>
      <a-modal v-model="showModal" width="40%" title="异常处理" centered @cancel="()=>form = {}" :maskClosable="false" destroyOnClose>
        <a-form-model :model="form" ref="ruleForm"   :colon="false">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="处理详情">
                <a-textarea v-model="form.content" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>

        <template slot="footer">
          <a-button type="primary" @click="SubmitFn">确定</a-button>
        </template>
      </a-modal>
    </div>
</template>

<script>
import moment from "moment";

export default {
    data() {
        return {
          form:{
            id:'',
            content:''
          },
          showModal:false,
            TreeData: [],
            equipmentTypeId: "1",
            // 设备表格字段
            columns: [
                {
                    title: "序号",
                    // dataIndex: "i",
                    align: "center",
                    width: "80px",
                    customRender: (text, record, index) =>
                        `${
                            (this.page.current - 1) * this.page.size + index + 1
                        }`,
                },
                {
                    title: "区域名称",
                    dataIndex: "areaName",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "企业名称",
                    dataIndex: "companyName",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "站点名称",
                    dataIndex: "monitorName",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "报警名称",
                    dataIndex: "lastMonitorWarningName",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "预警值",
                    dataIndex: "lastValue",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "监测因子名称",
                    dataIndex: "monitorFactorsName",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "报警时间",
                    dataIndex: "modifyTime",
                    align: "center",
                    ellipsis: true,
                    width: "200px",
                },
                // {
                //     title: "处理状态",
                //     dataIndex: "status",
                //     align: "center",
                //     ellipsis: true,
                // },
                {
                    title: "异常次数",
                    dataIndex: "hits",
                    align: "center",
                    ellipsis: true,
                },
                {
                    title: "操作",
                    width: "100px",
                    scopedSlots: {
                        customRender: "operate",
                    },
                    align: "center"
                },
            ],
            TableData: [], // 分页表格数据
            // 设备信息分页查询
            page: {
                current: 1,
                size: 10,
                status:true,
              monitorId: undefined,
              monitorFactorsName: "",
              isWarning:false
            },
            total: 0, // 设备总条数
            chartData:{},
            monitorData: [], // 图表弹窗警告类型数组

        }
    },
    methods: {
      onShow(id){
        this.showModal=true
        this.form.id=id
      },
      SubmitFn(){
          this.$api.handleWarningNoPic(this.form).then(res=>{
            if(res.data.code===0){
              this.$message.info("处理完成!");
              this.showModal=false
              this.getdata();
            }
          })
      },
        // 添加设备弹窗
        addEquipmentFn() {
            this.$refs.addPop.form.equipmentTypeId = this.equipmentTypeId;
            this.$refs.addPop.formDrawer = true;
        },
        // 图表弹框
        isEchartsFn(record) {
            console.log(record);
            this.$refs.ChartPop.isEcharts = true;
            this.chartData = record;
            this.$nextTick(() => {
                this.$refs.ChartPop.getEchartsData();
            });
        },
        // 搜索查询
        onSubmit() {
            this.page.current = 1;
            this.getdata();
        },

        // 分页方法
        itemRender(current, type, originalElement) {
            if (type === "prev") {
                return <a> 上一页 </a>;
            } else if (type === "next") {
                return <a> 下一页 </a>;
            }
            return originalElement;
        },
        pagechangeFn(page) {
            this.page.current = page;
            this.getdata();
        },
        // 获取数据
        // getdata() {
        //     this.$api.findWaringData(this.page).then((res) => {
        //         if (res.data.code == 0) {
        //             this.TableData = res.data.data;
        //             this.TableData.forEach((v) => {
        //                 switch (v.cn) {
        //                     case "2011":
        //                         v.cnName = "实时数据报警类型";
        //                         break;
        //                     case "2051":
        //                         v.cnName = "分钟数据报警类型";
        //                         break;
        //                     case "2061":
        //                         v.cnName = "小时数据报警类型";
        //                         break;
        //                     case "2031":
        //                         v.cnName = "天数据报警类型";
        //                         break;
        //                     default:
        //                         v.name = "";
        //                         break;
        //                 }
        //                 v.createTime = moment(parseInt(v.createTime)).format(
        //                     "YYYY/MM/DD HH:mm:ss"
        //                 );
        //             });
        //             this.total = res.data.total;
        //         } else {
        //             this.$message.warning(res.data.errorMessage);
        //         }
        //     });
        // },
        getdata() {
            this.$api.MonitorStationAbnormalData(this.page).then((res) => {
                if (res.data.code == 0) {
                    this.TableData = res.data.data;
                    this.TableData.forEach((v) => {
                        v.createTime = moment(parseInt(v.createTime)).format(
                            "YYYY/MM/DD HH:mm:ss"
                        );
                        v.modifyTime = moment(parseInt(v.modifyTime)).format(
                            "YYYY/MM/DD HH:mm:ss"
                        );
                    });
                    this.total = res.data.total;
                    console.log(this.TableData);
                } else {
                    this.$message.warning(res.data.errorMessage);
                }
            });
        },
    },
    created() {
        // 获取设备下拉数据
        this.$api.getFindMonitorInfoByUserId().then((res) => {
            if (res.data.code == 0) {
                res.data.data.forEach((v) => {
                    v.selectable = false;

                });
                this.TreeData = res.data.data;
                this.dataLoading3 = true;
            } else {
                this.$message.info(res.data.errorMessage);
            }
        });
    },
    mounted() {
        this.getdata();
    },
};
</script>

<style lang="scss" scoped>
.ZYF-Abnormal {
    width: 100%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
    .deviceinfo-from {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
    }

    .tableclass {
        width: 100%;
        height: 86%;
    }

    .content-bottom {
        margin-top: 10px;
        width: 100%;
    }

    .page-box {
        float: right;
    }
}

.Yellclass {
    color: springgreen;
}
.sousuobtn {
    background-color: #189580;
    border-color: #189580;
    padding: 0 10px;
}

/* 表单样式 */
::v-deep.ZYF-Abnormal .ant-form-item {
    margin-bottom: 0;
}
::v-deep.ZYF-Abnormal .deviceinfo-from .ant-form-item {
    width: 300px;
}
::v-deep.ZYF-Abnormal .deviceinfo-from .ant-form {
    width: 80%;
    display: flex;
}
/* 表格样式 */
.handle {
    width: 100%;
    color: #1890ff;
    cursor: pointer;
}


/* 图表 */
.line-echarts {
    width: 100%;
    height: 300px;
}
.echarts-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
}
</style>
